<template>
	<view class="pt40 plr30">
		<!-- 收益 -->
		<view class="piece3">
			<view class="piece3Middle">
				<view class="piece3Middle1">
					<view class="piece3Middle1V1">{{cashData.consumeCount}}</view>
					<view class="piece3Middle1V2">已成功邀请(人)</view>
				</view>
				<view class="piece3Middle2">
					<view class="piece3Middle2V1">{{cashData.countAmount}}</view>
					<view class="piece3Middle2V2">总收益(元)</view>
				</view>
				<view class="piece3Middle3">
					<view class="piece3Middle3V1">{{cashData.withdrawalAmount}}</view>
					<view class="piece3Middle3V2">已提现收益(元)</view>
				</view>
			</view>
		</view>
		<!-- 待激活--已激活tab -->
		<u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
		<!-- 待激活--已激活列表 start -->
		<block v-if="current!==2">
			<view class="flex_a mb30 p30 bf border-r1" v-for="(item,index) in loadList" :key="index">
				<view class="flex1 plr20">
					<view class="c6">手机号：<text class="ft24">{{ item.phone  }}</text></view>
					<view class="c6">注册时间：<text class="ft24">{{ item.ctime  }}</text></view>
					<view class="c6" v-if="current===1">消费时间：<text class="ft24">{{ item.consumetime || '--' }}</text>
					</view>
				</view>
				<view class="tae whn" style="max-width: 120upx;"
					:class="item.isConsume == 2 ? 'danger' : item.isConsume == 1 ? 'green' : ''">
					{{ item.isConsume == 2 ? '未消费' : item.isConsume == 1 ? '已消费' : '--' }}
				</view>
			</view>

		</block>
		<view class="flex_aj column ptb20" v-if="current!==2&&showTime && loadList.length == 0">
			<view class="c9 pt20">您还没有相关推广好友记录~</view>
		</view>
		<uni-load-more v-if="current!==2&&showTime && loadList.length > 0" :status="loadMoreText" color="#999">
		</uni-load-more>
		<!-- 待激活--已激活列表 end -->

		<!-- 提现列表 start -->
		<block v-if="current===2">
			<u-button type="primary" :plain="false" :disabled="cash===0" class="p30 btn" @click="withdrawDepositFn">申请提现
			</u-button>
			<view class="" style="margin-bottom: 40upx;margin-top: 40upx;font-size: 30upx;font-weight: 700;">提现记录：
			</view>
			<view class="flex_a mb30 p30 bf border-r1" v-for="(item,index) in loadLists" :key="index">
				<view class="flex1 plr20">
					<view class="c6">提现金额：<text class="ft24">{{ item.money  }}元</text></view>
					<view class="c6">提现时间：<text class="ft24">{{ item.ctime  }}</text></view>
					<view class="c6" v-if="item.status!==0">审核时间：<text class="ft24">{{ item.checkTime  }}</text></view>
					<view class="c6" v-if="item.status!==0">审核备注：<text class="ft24">{{ item.remark  }}</text></view>
				</view>
				<view class="tae whn" style="max-width: 120upx;"
					:class="item.status == 0||item.status == 2||item.status == 3 ? 'danger' : item.status == 1 ? 'green' : ''">
					{{ item.status == 0 ? '待审核' : item.status == 1 ? '提现完成' :item.status == 2 ? '审核拒绝' :item.status == 3 ? '提现失败' : '--' }}
				</view>
			</view>

		</block>
		<view class="flex_aj column ptb20" v-if="current===2&&showTimes && loadLists.length == 0">
			<view class="c9 pt20">您还没有相关提现记录~</view>
		</view>
		<uni-load-more v-if="current===2&&showTimes && loadLists.length > 0" :status="loadMoreText" color="#999">
		</uni-load-more>
		<!-- 提现列表 end -->
	</view>
</template>

<script>
	import {
		HOST
	} from '@/config/index.js'
	import {
		promotionPromotionRecordss,
		promotionAmountWithdraw,
		userWithdrawRecordList
	} from '@/api/user.js'
	export default {
		data() {
			return {
				list: [{
					name: '待激活'
				}, {
					name: '已激活'
				}, {
					name: '提现'
				}],
				current: 0,
				cashData: {
					consumeCount: 0,
					countAmount: 0,
					withdrawalAmount: 0,
					promotionId: '',
				},
				loadList: [],
				showTime: false,
				loadLists: [
					// {
					// 	id: "1000001586394316", //暂存券id
					// 	orderNo: "TGTX1000001436272633", //订单号
					// 	type: 501, //类型 501:推广提现
					// 	orderName: "推广佣金提现", //订单名称
					// 	money: 0.1, //金额
					// 	ctime: "2023-09-08 16:13:56", //创建时间
					// 	status: 0, //状态  0 待审核 1提现完成 2审核拒绝 3  提现失败(转账失败)
					// 	remark: null, //备注（审核）
					// 	checkTime: null //审核时间
					// },
					// {
					// 	id: "1000001586394316", //暂存券id
					// 	orderNo: "TGTX1000001436272633", //订单号
					// 	type: 501, //类型 501:推广提现
					// 	orderName: "推广佣金提现", //订单名称
					// 	money: 0.1, //金额
					// 	ctime: "2023-09-08 16:13:56", //创建时间
					// 	status: 0, //状态  0 待审核 1提现完成 2审核拒绝 3  提现失败(转账失败)
					// 	remark: null, //备注（审核）
					// 	checkTime: null //审核时间
					// },
				],
				showTimes: false,
				cash: 0,
			}
		},
		onLoad(e) {
			console.log('e', e);
			this.cashData.consumeCount = e.consumeCount
			this.cashData.countAmount = e.countAmount
			this.cashData.withdrawalAmount = e.withdrawalAmount
			this.cash = this.cashData.countAmount - this.cashData.withdrawalAmount
			this.cashData.promotionId = e.promotionId || ''
			this.friendFn(2)
			console.log('222', e.withdrawalAmount, this.cashData.withdrawalAmount);
		},
		async onShow() {},
		methods: {
			// Tab栏
			change(index) {
				this.current = index;
				console.log('222', this.current);
				if (this.current === 1) {
					this.friendFn(1)
				} else if (this.current === 0) {
					this.friendFn(2)
				} else if (this.current === 2) {
					this.tixianFn()
				}

			},
			// 提现按钮
			async withdrawDepositFn() {
				const res = await promotionAmountWithdraw()
				console.log('6565', res);
				if (res.code == 200) {
					this.toast('提现申请已成功发起，即将返回上一页...')
					setTimeout(() => {
						uni.reLaunch({
							url: `/pages/user/extensionActivity/index`,
						});
					}, 2000)
				} else {
					this.toast('提现申请发起失败')
					uni.reLaunch({
						url: `/pages/user/extensionActivity/index`,
					});
				}

			},
			// 提现记录列表
			async tixianFn() {
				const res = await userWithdrawRecordList({
					pageNum: 1,
					pageSize: 200,
					type: '501',
					orderNo: '',
					status: '',
					beginTime: '',
					endTime: '',
				})
				this.showTimes = true
				this.loadLists = res.rows || []
			},
			// 已激活---待激活
			async friendFn(val) {
				const res = await promotionPromotionRecordss({
					promotionId: this.cashData.promotionId, //推广员id
					isConsume: val, //是否消费/是否激活  1 已消费  2未消费
				})
				this.showTime = true
				this.loadList = res.rows || []
				console.log('111', res);
			},
		},
	}
</script>

<style scoped lang="scss">
	.piece3 {
		width: 100%;
		background-color: #fff;
		border-radius: 10px;

		.piece3Middle {
			display: flex;
			justify-content: space-around;
			margin-top: 1%;
			margin-bottom: 5%;
			// background-color: #eeeeee;
			padding: 4%;
			margin-left: 20upx;
			margin-right: 20upx;

			.piece3Middle1 {
				display: flex;
				flex-direction: column;
				align-items: center;

				.piece3Middle1V1 {
					font-size: 40upx;
					font-weight: 700;
					margin-bottom: 5%;
				}

				.piece3Middle1V2 {
					font-size: 25upx;
					color: #999;
				}
			}

			.piece3Middle2 {
				display: flex;
				flex-direction: column;
				align-items: center;

				.piece3Middle2V1 {
					font-size: 40upx;
					font-weight: 700;
					margin-bottom: 5%;
				}

				.piece3Middle2V2 {
					font-size: 25upx;
					color: #999;
				}
			}

			.piece3Middle3 {
				display: flex;
				flex-direction: column;
				align-items: center;

				.piece3Middle3V1 {
					font-size: 40upx;
					font-weight: 700;
					margin-bottom: 5%;
				}

				.piece3Middle3V2 {
					font-size: 25upx;
					color: #999;
				}
			}
		}
	}

	.btn {
		border-radius: 30upx;
	}
</style>